<template>
  <van-nav-bar
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
    title="注册"
    placeholder
    fixed
  />
  <!-- 表单 -->
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        required
        v-model="userName"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        required
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <!-- 昵称 -->
      <van-field v-model="nickName" name="昵称" label="昵称" placeholder="若不填写用户名即为昵称" />
      <!-- 性别 -->
      <van-field name="gender" label="性别">
        <template #input>
          <van-radio-group v-model="gender" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- 生日选择 -->
      <van-field
        required
        v-model="birthday"
        is-link
        readonly
        name="生日"
        label="生日"
        placeholder="点击选择时间"
        :rules="[{ required: true, message: '请填写生日' }]"
        @click="birthdayShowPicker = true"
      />
      <van-popup v-model:show="birthdayShowPicker" destroy-on-close position="bottom">
        <van-date-picker
          :model-value="birthdayPickerValue"
          @confirm="birthdayonConfirm"
          @cancel="birthdayShowPicker = false"
          :min-date="new Date(1970, 1, 1)"
          :max-date="new Date()"
        />
      </van-popup>
      <!-- 年龄 -->
      <van-field v-model="age" type="digit" name="年龄" label="年龄" placeholder="年龄" />
      <!-- 头像 -->
      <van-field name="uploader" label="头像">
        <template #input>
          <van-uploader
            v-model="fileList"
            :after-read="getFileUrlFn"
            :max-count="1"
            accept="image/png, image/jpeg"
          />
        </template>
      </van-field>
      <!-- 地址 -->
      <van-field
        v-model="area"
        is-link
        readonly
        name="area"
        label="地区"
        placeholder="点击选择省市区"
        @click="addressShowArea = true"
      />
      <van-popup v-model:show="addressShowArea" destroy-on-close position="bottom">
        <van-area
          :area-list="areaList"
          :model-value="addressPickerValue"
          @confirm="addressOnConfirm"
          @cancel="addressShowArea = false"
        />
      </van-popup>
      <!-- 详细地址 -->
      <van-field
        v-model="address"
        rows="3"
        autosize
        label="详细地址"
        type="textarea"
        placeholder="请输入详细地址"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit"> 注册 </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { areaList } from '@vant/area-data' //vant地区数据 需要安装@vant/area-data
import { fileUploadReq, userregReq } from '@/api/user'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
//用户名
let userName = ref('')
//密码
let password = ref('')
//生日
// let date = new Date()
let birthday = ref('')
let birthdayShowPicker = ref(false)
let birthdayPickerValue = ref([])
//年龄
let age = ref('')
//生日选择器确认
function birthdayonConfirm({ selectedValues }) {
  birthday.value = selectedValues.join('/')
  birthdayPickerValue.value = selectedValues
  birthdayShowPicker.value = false
  calculateAge(selectedValues)
}
//计算年龄
function calculateAge(selectedValues) {
  const [year, month, day] = selectedValues
  const birthDate = new Date(year, month - 1, day)
  const today = new Date()
  let calculatedAge = today.getFullYear() - birthDate.getFullYear()
  const monthDifference = today.getMonth() - birthDate.getMonth()
  if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
    calculatedAge--
  }
  age.value = calculatedAge
}
//头像

let fileList = ref([])
//头像地址
let avatar = ref('')
function getFileUrlFn(file) {
  // console.log(file)

  fileUploadReq(file.file).then((res) => {
    // console.log(res.data)
    avatar.value = 'http://localhost:1337' + res.data.data
  })
}
//地区
let area = ref('')

let addressShowArea = ref(false)
let addressPickerValue = ref([])
function addressOnConfirm({ selectedValues, selectedOptions }) {
  addressPickerValue.value = selectedValues.length ? selectedValues[selectedValues.length - 1] : ''
  addressShowArea.value = false
  area.value = selectedOptions.map((item) => item.text).join('/')
  // console.log('地址:', area.value)
}
//详细地址
let address = ref('')
//昵称
let nickName = ref('')
//性别
let gender = ref('')
let router = useRouter()
function onSubmit() {
  //添加默认头像
  if (avatar.value.trim() == '') {
    avatar.value =
      'https://img.ixintu.com/download/jpg/20201025/4856efad029798c7e1e67baec4ce9d4e_512_512.jpg!ys'
  }


  // console.log('用户名：', userName.value)
  // console.log('密码', password.value)
  // console.log('昵称', nickName.value)
  // console.log('性别', gender.value)
  // console.log('生日', birthday.value)
  // console.log('年龄', age.value)
  // console.log('头像地址', avatar.value)
  // console.log('地区', area.value)
  // console.log('详细地址', address.value)
  userregReq(
    userName.value,
    password.value,
    age.value,
    avatar.value,
    area.value,
    address.value,
    nickName.value,
    gender.value,
    birthday.value,
  ).then((res) => {
    // console.log(res.data)
    if (res.data.code === 1) {
      // eslint-disable-next-line no-undef
      showSuccessToast('注册成功')
      // showNotify({ type: 'success', message: '注册成功' })
      router.push('/login')
    } else {
      // eslint-disable-next-line no-undef
      showFailToast(res.data.data)
      // showNotify({ type: 'danger', message: res.data.data })
    }
  })

}
</script>

<style></style>
